import { Component } from 'react'
import { useSelector, useDispatch } from "react-redux";
import { View, Text } from '@tarojs/components'
import { AtList, AtListItem, AtAvatar, AtButton } from "taro-ui"
import Taro, { useDidShow } from '@tarojs/taro'
import './index.scss'
import { getUserInfo, removeUserInfo } from "@/utils/storage";
const NOT_DATA = '-'
export default () => {
    const dispatch = useDispatch();
    const { userId, userInfo } = useSelector((state) => state.user);
    console.log("userInfo", userInfo)
    const {
        username,
        sex, email, dept, phonenumber,
    } = userInfo;
    let sexName = sex === 1 ? '女' : '男'
    useDidShow(() => {
        const res = getUserInfo()
        console.log(res)
        if (res?.userId) {
            dispatch(
                {
                    type: 'user/overrideStateProps',
                    payload: {
                        userId: res?.userId
                    }
                }
            )
            dispatch(
                {
                    type: 'user/getUserInfoById',
                }
            )
        }
    }
    )
    const logOut = () => {
        removeUserInfo()
        Taro.navigateTo({
            url: "../login/index",
        });

    }
    return <View>
        <AtAvatar styee={{ margin: '15px' }} circle image='https://jdc.jd.com/img/200'></AtAvatar>

        <AtList>
            <AtListItem title='姓名' extraText={username || NOT_DATA} />
            <AtListItem title='性别' extraText={sexName || NOT_DATA} />
            <AtListItem title='电话' extraText={phonenumber || NOT_DATA} />
            <AtListItem title='邮箱' extraText={email || NOT_DATA} />
            <AtListItem title='所在部门' extraText={dept?.deptName || NOT_DATA} />
            <AtListItem
                title='角色'
                arrow='right'
                thumb='https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png'
            />
        </AtList>
        <View className='fixBottom-fixed'>
            <View className='button-container'>
                <AtButton className='button-flex' onClick={logOut} type='primary'>退出登录</AtButton>
            </View>
        </View>
    </View>
}